<template>
  <div>
    ==={{answer}}
    <span
      :class="show[index].answer"
      :key="index"
      v-for="(item, index) in RightAnswer"
    >
      {{ index + 1 }}:
      <span>{{ show[index].msg }}</span>
    </span>
  </div>
</template>

<script>
export default {
  created () {
    this.$bus.$on("RightAnswer", (data) => {
      console.log(data);
      this.RightAnswer = data;
    });
  },
  mounted () {
    this.$bus.$on("answer", (data) => {
      console.log(data, "data")
      console.log(this, "this")
      this.answer = data
    });
  },
  beforeMount () {
    this.answer.forEach((item, index) => {
      if (item === "") {
        this.show.push({
          answer: "undo",
          msg: "未完成",
        });
      } else if (item == this.RightAnswer[index]) {
        this.show.push({
          answer: "right",
          msg: "正确",
        });
      } else {
        this.show.push({
          answer: "error",
          msg: "错误",
        });
      }
    });
  },
  data () {
    return {
      RightAnswer: [],
      answer: ["", "", "", "", "", ""],
      show: [],
    };
  },
  watch: {
    answer: {
      deep: true,
      handler (newValue) {
        console.log(newValue, "watch");
        newValue.forEach((item, index) => {
          if (item === "") {
            this.$set(this.show, index, {
              answer: "undo",
              msg: "未完成",
            });
          } else if (item == this.RightAnswer[index]) {
            this.$set(this.show, index, {
              answer: "right",
              msg: "正确",
            });
          } else {
            this.$set(this.show, index, {
              answer: "error",
              msg: "错误",
            });
          }
        });
        console.log(this.show, "show");
      },
    },
  },
};
</script>

<style scoped>
.right {
  color: green;
}
.error {
  color: red;
}
.undo {
  color: #ccc;
}
</style>